<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cloneNode</title>
	<style>
		*{padding:0;margin:0;}
		#did{
			width:400px;
			height:400px;
			border:1px solid red;
		}
		img{
			width:200px;
			height:200px;
		}
	</style>
</head>
<body>
	<div id="did" ></div>
	<img src="./images/1.jpg" alt="">
	<img src="./images/2.jpg" alt="">
	<img src="./images/3.jpg" alt="">
	<img src="./images/4.jpg" alt="">
</body>
	<script>
		did = document.getElementById("did");
		list = document.getElementsByTagName("img");
		for(var i=0;i<list.length;i++){
			list[i].onclick=function(){
				info = this.cloneNode();
				did.appendChild(info);
			}
		}
	</script>
</html>